<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ include file="../../base.jsp"%>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">


    <!--！！！！！！-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
        #l-map{height:400px;width:100%;}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=hOQWzUXjptzpxtLHuiLgoGul82seI6Tq"></script>
    <script src="//libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>数据 - AdminLTE2定制版</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet"
          href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
          crossorigin="anonymous">


</head>
<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <!-- 内容头部 -->
    <section class="content-header">
        <h1>
            货运管理
            <small>新增出口报运单</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="all-order-manage-list.html">货运管理</a></li>
            <li class="active">新增出口报运单</li>
        </ol>
    </section>
    <!-- 正文区域 -->
    <section class="content">
        <form action="/cargo/export/edit.do" method="post">
            <div class="panel panel-default">
                <div class="panel-heading">对【${id}】出口报运</div>
                <input type="hidden" name="contractIds" value="${id}">
                <div class="row data-type" style="margin: 0px">
                    <div class="col-md-2 title">信用证号</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="信用证号" name="lcno" value="${export.lcno}"/>
                    </div>

                    <div class="col-md-2 title">收货人及地址</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="收货人及地址" name="consignee" value="${export.consignee}"/>
                    </div>

                    <div class="col-md-2 title">唛头</div>
                    <div class="col-md-4 data">
                        <input type="text" class="form-control" placeholder="唛头" name="marks" value="${export.marks}"/>
                    </div>

                    <div class="col-md-2 title">装运港</div>
                    <div class="col-md-4 data">
                        <input type="text" id="start" name="shipmentPort" class="form-control" placeholder="装运港"value="${export.shipmentPort}"/>
                    </div>

                    <div class="col-md-2 title">目的港</div>
                    <div class="col-md-4 data">
                        <input type="text" id="end" name="destinationPort" class="form-control" placeholder="目的港" value="${export.destinationPort}"/>
                    </div>

                    <div class="col-md-2 title">运输方式</div>
                    <div class="col-md-4 data">
                        <input type="text" name="transportMode" class="form-control" placeholder="运输方式" value="${export.transportMode}">
                    </div>

                    <div class="col-md-2 title">价格条件</div>
                    <div class="col-md-4 data">
                        <input type="text" name="priceCondition" class="form-control" placeholder="价格条件" value="${export.priceCondition}"/>
                    </div>

                    <div class="col-md-2 title">总箱数</div>
                    <div class="col-md-4 data">
                        <input type="text" name="boxNums" class="form-control" placeholder="总箱数" value="${export.boxNums}"/>
                    </div>

                    <div class="col-md-2 title">总毛重</div>
                    <div class="col-md-4 data">
                        <input type="text" name="grossWeights" class="form-control" placeholder="总毛重"  value="${export.grossWeights}">

                    </div>
                    <div class="col-md-2 title">体积</div>
                    <div class="col-md-4 data">
                        <input type="text" name="measurements" class="form-control" placeholder="体积" value="${export.measurements}">
                    </div>

                    <div class="col-md-2 title rowHeight2x">备注</div>
                    <div class="col-md-10 data rowHeight2x">
                        <textarea class="form-control" rows="3" name="remark">${export.remark}</textarea>
                    </div>
                </div>
            </div>
            <!--工具栏-->
            <div class="box-tools text-center">
                <button id="result" class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data"
                        type="button">查看地图线路</button>
                <button type="submit"  class="btn bg-maroon">保存</button>
                <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
            </div>
        </form>
        <!--工具栏/-->
    </section>
</div>

<!-- 模态弹出窗内容 -->
<div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="margin-top: -90px">
        <div class="modal-content" >
            <%--<div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span></button>
                <h4 class="modal-title">出货路线</h4>
            </div>--%>
            <div class="modal-body">
                <div id="l-map"></div>
                <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            </div>
            <div class="modal-footer" style="height: 60px">
                <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-bottom: 30px">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 内容区域 /-->

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

<!--百度地图API功能-->
<script type="text/javascript">
    function G(id) {
        return document.getElementById(id);
    }
    var map = new BMap.Map("l-map");
    //map.centerAndZoom("北京",12);   // 初始化地图,设置城市和地图级别。
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮
    map.enableKeyboard(true); //开启键盘上下左右键移动地图

    // 添加控件
    var Scaleopts = { // 配置
        anchor:BMAP_ANCHOR_BOTTOM_LEFT, //控件的停靠位置
        //BMAP_ANCHOR_TOP_LEFT     控件将定位到地图的左上角
        //BMAP_ANCHOR_TOP_RIGHT    控件将定位到地图的右上角
        //BMAP_ANCHOR_BOTTOM_LEFT  控件将定位到地图的左下角
        //BMAP_ANCHOR_BOTTOM_RIGHT 控件将定位到地图的右下角
        offset: new BMap.Size(30,60), //控件的水平偏移值
    };
    var Navopts = {
        anchor:'',
        offset: new BMap.Size(10,10), //控件的水平偏移值
        type:'', //平移缩放控件的类型
        //BMAP_NAVIGATION_CONTROL_LARGE  标准的平移缩放控件（包括平移、缩放按钮和滑块）
        //BMAP_NAVIGATION_CONTROL_SMALL  仅包含平移和缩放按钮
        //BMAP_NAVIGATION_CONTROL_PAN    仅包含平移按钮
        //BMAP_NAVIGATION_CONTROL_ZOOM   仅包含缩放按钮
        showZoomInfo:'', //是否显示级别提示信息
        enableGeolocation:'' //控件是否集成定位功能，默认为false
    };
    map.addControl(new BMap.NavigationControl(Navopts));// 平移缩放控件
    map.addControl(new BMap.OverviewMapControl());// 缩略地图
    map.addControl(new BMap.ScaleControl(Scaleopts));// 比例尺
    map.addControl(new BMap.MapTypeControl());// 地图类型
    map.addControl(new BMap.CopyrightControl());// 版权
    map.addControl(new BMap.GeolocationControl());// 定位 针对移动端开发，默认位于地图左下方

    var ac1 = new BMap.Autocomplete({"input" : "start","location" : map}); //建立一个自动完成的对象
    var ac2 = new BMap.Autocomplete({"input" : "end","location" : map}); //建立一个自动完成的对象

    downList(ac1);
    downList(ac2);

    function downList(ac){
        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

            setPlace();
        });

        function setPlace(){
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun(){
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 18);
                var marker = new BMap.Marker(pp);
                map.addOverlay(marker); //添加标注
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
    }

    /*$("#result").click(function () {
        var start = $("#start").val();
        var end = $("#end").val();
        search(start,end,BMAP_DRIVING_POLICY_LEAST_TIME);
        function search(start,end,route){
            var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});

            driving.search(start,end);
        }
    });*/

    $("#result").click(function () {

        var myIcon = new BMap.Icon("http://qk19exava.hb-bkt.clouddn.com/plane_new.png", new BMap.Size(30, 30), { //小车图片
            //offset: new BMap.Size(0, -5),    //相当于CSS精灵
            imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
        });

        var start = $("#start").val();
        var end = $("#end").val();
        search(start,end,BMAP_DRIVING_POLICY_LEAST_TIME);
        function search(start,end,route){
            var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});

            driving.search(start,end);
        }

        window.run = function (){
            var driving2 = new BMap.DrivingRoute(map);    //驾车实例
            driving2.search(start, end);
            driving2.setSearchCompleteCallback(function(){
                var pts = driving2.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                var paths = pts.length;    //获得有几个点

                var carMk = new BMap.Marker(pts[0],{icon:myIcon});
                map.addOverlay(carMk);
                i=0;
                function resetMkPoint(i){
                    carMk.setPosition(pts[i]);
                    if(i < paths){
                        setTimeout(function(){
                            i++;
                            resetMkPoint(i);
                        },100);
                    }
                }
                setTimeout(function(){
                    resetMkPoint(5);
                },100)

            });
        }
        setTimeout(function(){
            run();
        },1500);
    });
</script>
</body>
</html>